<template>
  <component :is="type == 'group' ? 'n-button-group' : 'div'">
    <component :is="type == 'group' ? 'div' : 'n-space'">
      <template v-for="button in buttons">
        <n-button v-if="button.show.value" v-bind="button.attrs" @click="button.onClick">
          {{ button.name }}
        </n-button>
      </template>
    </component>
  </component>
</template>
<script lang="ts" setup>
import { computed } from 'vue';

interface Props {
  ocean: any,
  type?: 'group' | 'default',
}
let props = defineProps<Props>()
let buttons = computed(() => props.ocean.buttons);
</script>